/**
 * 组件名称：一级菜单
 * 使用场景：网页正上方正中央的一级菜单（两个组件，文字的和按钮的）
 * 功能介绍：点击跳转至对应页面，支持响应式，屏幕宽度过小时收缩为折叠按钮
 * 功能进度：100%
 * 待办事项：区分当前所处的一级目录位置
 */

"use client";
import Link from "next/link";
import {usePathname} from "next/navigation";

import {
  Group,
  Text,
  ActionIcon,
  Menu,
  MenuTarget,
  MenuDropdown,
  MenuItem,
  rem,
} from "@mantine/core";
import {IconMenu2, IconArrowUpRight} from "@tabler/icons-react";
import {IconHome, IconListDetails, IconScreenShare, IconHeartCode} from "@tabler/icons-react";
import classes from "./IpdMenu.module.css";

interface Menu {
  label: string;
  href: string;
  icon: React.FC<any>;
  isExternal: boolean;
}

const menu: Menu[] = [
  {
    label: "首页",
    href: "/home",
    icon: IconHome,
    isExternal: false,
  },
  {
    label: "设计平台",
    href: "/ipdv2",
    icon: IconListDetails,
    isExternal: false,
  },
  {
    label: "可视大屏",
    href: "https://www.baidu.com", // 配成浩浩的大屏地址
    icon: IconScreenShare,
    isExternal: true,
  },
  {
    label: "网弈平台",
    href: "https://www.baidu.com",
    icon: IconHeartCode,
    isExternal: true,
  },
];

// 屏幕较宽时，显示为文字菜单
export const IpdMenuText = () => {
  const pathname = usePathname();

  return (
    <Group visibleFrom="md">
      {menu.map((item: Menu) => (
        <Group key={item.label} gap={2}>
          <Text
            size="md"
            component={Link}
            href={item.href}
            fw={460}
            className={pathname.startsWith(item.href) ? classes.active : classes.default}
          >
            {item.label}
            {item.isExternal ? <IconArrowUpRight size={14} /> : ""}
          </Text>
        </Group>
      ))}
    </Group>
  );
};

// 屏幕较窄时，显示为折叠菜单
export const IpdMenuActionIcon = () => {
  return (
    <Menu withArrow trigger="click-hover" transitionProps={{transition: "fade", duration: 300}}>
      <MenuTarget>
        <ActionIcon variant="default" size="lg" radius="md" aria-label="Menu" hiddenFrom="md">
          <IconMenu2 style={{width: rem(22), height: rem(22)}} stroke={1.5} />
        </ActionIcon>
      </MenuTarget>

      <MenuDropdown>
        {menu.map((item) => (
          <MenuItem
            key={item.label}
            leftSection={<item.icon style={{width: rem(16), height: rem(16)}} stroke={1.5} />}
            component={Link}
            href={item.href}
          >
            {item.label}
          </MenuItem>
        ))}
      </MenuDropdown>
    </Menu>
  );
};
